
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--   let/var的区别
 块级作用域 JS中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关 
-->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
   //1.变量作用域：变量在什么范围内是可用
  // {
  //   var  name = "why"
  //   console.log(name)
  // }

  //2.没有块级作用域引起的问题 if的块级没有作用域
  // var func;
  // if(true){
  //   var name = "why"
  //   func = function(){
  //     console.log(name)
  //   }
  // }
  // name = 'kobe'
  // func()

  //3.没有块级作用域引起的问题，for的块级也没有块级
  // var btns = document.getElementsByTagName("button")
  // for(var i = 0;i<btns.length;i++){
  //   btns[i].addEventListener('click',function(){
  //     console.log('第'+i+'个按钮被点击')
  //   })
  // }
  //解决方法一 闭包
  //为啥？函数是一个作用域
  //ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助function的作用域
  //来解决引用外面变量的问题
  //ES6 加入let let它是有if和for的块级作用域
  // var btns = document.getElementsByTagName("button")
  // for(var i = 0;i<btns.length;i++){
  //   (function(i){
  //     btns[i].addEventListener('click',function(){
  //     console.log('第'+i+'个按钮被点击')
  //   })
  //   })(i)
  // }

  // const btns = document.getElementsByTagName("button")
  // for(let i = 0;i<btns.length;i++){
  //   btns[i].addEventListener('click',function(){
  //     console.log('第'+i+'个按钮被点击')
  //   })
  // }

  //const 当我们修饰的标识符不会被再次赋值的时，就可以使用const来保证数据的安全性
  //在开发中优先使用const，只有需要改变某一个标识的时候才使用let
  //一旦给const修饰的标识符被赋值之后，不能修改
  //在使用const定义标识符，必须进行赋值
  //常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
    // const name = 'why'

//对象字面量的增强写法
//const obj = new Object()
// const obj={
//   name:'why',
//   age:16,
//   eat:function(){
//     console.log('ssss')
//   }
// }

//1.属性的增强写法
  const name = 'why'
  const age = 18;
  const height = 1.22
//ES5
  // const obj={
  //   name:name,
  //   age:age,
  //   height:height
  // }
//ES6 对象的增强写法
  // const obj={
  //   name,
  //   age,
  //   height
  // }
  // console.log(obj)
//函数的增强写法
//ES5
// const obj ={
//   run:function(){

//   },
//   eat:function(){

//   }
// }
//ES6
// const obj ={
//   run(){},
//   eat(){}
// } 
//v-if ：当添加为false时，包含v-if的指令的元素，根本就不会存在dom中（切换一次）
//v-show：当条件为false时，v-show只是给我们的元素添加一个行内样式：display：none（切换频率高的时候）




</script>
</body>
</html>